<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="加载数据">
<h1>商品列表</h1>
<table>
    <tr>
        <th>商品名</th>
        <th>库存</th>
        <th>价格</th>
    </tr>
</table>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //给按钮添加点击事件
    $("input").click(function () {
        //模拟从服务器请求到的数据
        let arr =[{title:"小米手机",num:1000,price:5000},
            {title:"小米手机",num:1000,price:5000},
            {title:"小米手机",num:1000,price:5000}]
        //把数据显示到页面中
        for (let i = 0; i <arr.length ; i++) {
            let item =arr[i];//遍历商品对象
            //创建tr和td
            let tr =$("<tr></tr>");
            let titletd =$("<td></td>");
            let numtd =$("<td></td>");
            let pricetd =$("<td></td>");
            //设置显示的文本
            titletd.text(item.title);
            numtd.text(item.num);
            pricetd.text(item.price);
            //添加
            tr.append(titletd);
            tr.append(numtd);
            tr.append(pricetd);
            $("table").append(tr);
        }
    })
</script>
</body>
</html>